<style>
	#div1{
		float: left;
		margin: 10px;
	}
	#div2{
		float: left;
		margin: 10px;
	}
	#div3{
		float: left;
		margin: 10px;
	}
	#div4{
		float: left;
		margin: 10px;
	}
	#div5{
		float: left;
		margin: 10px;
	}
	.predefine{
		font-weight: bold;
		padding: 10px;
		border: 1px solid #fff;
		-webkit-box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.1);
   		-moz-box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.1);
   		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
  		
	}
	
</style>

<?php echo form_open('user/aboutme/getallaboutlist/')?>
<?php echo validation_errors(); ?>
<h4 align="center">Edit Your About Page</h4>
<br />
<table style="margin: auto;">
<tr> 
		<td>
			<b>Name:</b>
		</td>
		<td>
		<input type="hidden" name="users" value="<?php echo $userid; ?>"/>		
		<input type="text" name="user" value="<?php echo ucfirst($this->common_model->get_username_id($userid)); ?>"/>		
		</td>
	</tr>
<tr>
<td id="education"></td>
</tr>
	<tr><td><b>Education:</b></td>
	<td><input type="text" name="schoolname[]" placeholder="School/College Name..."/></td></tr>
	<tr><td></td><td><input name="degree[]" type="text" placeholder="Degree/Certification..."/></td></tr>
	<tr><td></td><td><input name="started[]" type="text" placeholder="Started..."/></td></tr>
	<tr><td></td><td><input name="ended[]" type="text" placeholder="Ended..."/></td></tr>
	<tr><td></td><td><div id="addinput">
					<a href="#" id="addNew">
						<i class="icon-plus-sign"> </i>
						Add more schools/colleges
					</a>
				</p>
			</div></td></tr>
		<tr><td>&nbsp;</td></tr>
	<tr><td><b>Languages Known:&nbsp;</b></td>
	<td><input type="text" name="language[0][name]" placeholder="Name of the language..."/></td>
	</tr><tr><td></td>
	<td>	
	<input type="checkbox" name="language[0][read]" value="1"/> read
	<input type="checkbox" name="language[0][write]" value="1"/> write
	<input type="checkbox" name="language[0][speak]" value="1"/> speak</td></tr><tr></tr>
	

	<tr><td></td><td><div id="addinput2">
					<a href="#" id="addNew2">
						<i class="icon-plus-sign"> </i>
						Add more Languages
					</a>
				</p>
			</div></td></tr>
			<tr><td>&nbsp;</td></tr>
	
	
	<tr><td><b>Address:</b></td>
	<td><textarea name="street" placeholder="Street Address..."></textarea></td></tr>
	<tr><td></td><td><input type="text" name="zipcode" placeholder="Zipcode"/></td></tr>
	<tr><td></td><td><input type="text" name="city" placeholder="City"/></td></tr>
	<tr><td></td><td><input type="text" name="state" placeholder="State"/></td></tr>
	<tr><td></td><td><input type="text" name="country" placeholder="Country"/></td></tr>

	<tr><td><b>Phone:</b></td><td>
		<input type="text" name="phone" placeholder="mobile/landline..." >
	</td></tr>
	
		<tr>
		<td>
			<b>Hobbies:</b>
		</td>
		<td>
		
		<? 
$rowcount = count($hobbies);

echo "<div class='text-info' id='div1'>";
$i = 0;
foreach ($hobbies as $row) {?>
	 <input type="checkbox" name="hobbies[]" value="<?php echo $row->id ?>">
		<?php echo ucfirst($row->name); ?><br>
 <?php
  $i++;

  if ($i == floor($rowcount / 5)) {
     
      echo "</div><div class='text-info' id='div2'>";
  }
  
  if ($i == floor($rowcount / 2.5)) {
     
      echo "</div><div class='text-info' id='div3'>";
  }
  if ($i == floor($rowcount / 1.65)) {
     
      echo "</div><div class='text-info' id='div4'>";
  }
   if ($i == floor($rowcount / 1.22)) {
     
      echo "</div><div class='text-info' id='div5'>";
  }
}
echo "</div>";
?>
	
	<tr><td></td><td><br><input type="submit" value="Update" class="btn btn-success"/></td></tr>

</table>
</form>


<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
	</script>
	<script type="text/javascript">
		$(function()
			{
				j=1;
				var addDiv = $('#addinput');
				var i = $('#addinput p').size() +  1;
				$('#addNew').live('click', function()
					{
						$('<p><input type="text" id="p_new1" size="40" name="schoolname[]" value="" placeholder="School/College..." /><br><input type="text" id="p_new3" size="40" name="degree[]" value="" placeholder="Degree/Certifications"/><br><input type="text" id="p_new4" size="40" name="started[]" value="" placeholder="Started in the year"/><br><input type="text" id="p_new5" size="40" name="ended[]" value="" placeholder="Ended in the year"/><a href="#" id="addNew"> <i class="icon-plus-sign"></i></a><a href="#" id="remNew"> <i class="icon-minus-sign" id="minus"></i></a> </p>').appendTo(addDiv);
						i++;

						return false;
					});


				$('#remNew').live('click', function()
					{
						if( i > 2 )
						{
							$(this).parents('p').remove();
							i--;
						}
						return false;
					});
			});

	</script>
	
	
	<script type="text/javascript">
		$(function()
			{
				j=1;
				var addDiv2 = $('#addinput2');
				var i = $('#addinput2 p').size() +  1;
				$('#addNew2').live('click', function()
					{
						$('<p><input type="text" id="p_new1" size="40" name="language['+i+'][name]" value="" /><a href="#" id="addNew2"> <i class="icon-plus-sign"> </i></a><a href="#" id="remNew2"> <i class="icon-minus-sign" id="minus"></i></a><br><input type="checkbox" id="p_new3" size="40" name="language['+i+'][read]" value="1"/> read <input type="checkbox" id="p_new4" size="40" name="language['+i+'][write]" value="1" /> write <input type="checkbox" id="p_new5" size="40" name="language['+i+'][speak]" value="1" /> speak  </p>').appendTo(addDiv2);
						i++;

						return false;
					});

				$('#remNew2').live('click', function()
					{
						if( i > 2 )
						{
							$(this).parents('p').remove();
							i--;
						}
						return false;
					});
			});

	</script>
	